<!-- 未推拽前代码  -->
<template>
  <div class="cp_box">
    <el-row :gutter="4">
      <el-col
        :span="19"
        class="left_warp_box"
      >
        <el-row>

          <dl class="left_dl">
            <template v-for="item in weekLists">
              <dt :key="item">{{item}}</dt>
            </template>
          </dl>

          <div class="data_box">
            <div class="row_box">
              <p>上午</p>
              <ul>
                <li
                  v-for="item in morning"
                  :key="item.title"
                >
                  <el-tag
                    v-for="(tag,tagIndex) in item.goodsList"
                    :key="tagIndex"
                    closable
                  >
                    {{tag}}
                  </el-tag>
                </li>
              </ul>
            </div>
            <div class="row_box">
              <p>下午</p>
              <ul>
                <li
                  v-for="item in afternoon"
                  :key="item.title"
                >
                  <el-tag
                    v-for="(tag,tagIndex) in item.goodsList"
                    :key="tagIndex"
                    closable
                  >
                    {{tag}}
                  </el-tag>
                </li>
              </ul>
            </div>
          </div>
        </el-row>
      </el-col>
      <el-col :span="5" class="right_wrap_box">
        <h2>菜品大全</h2>
        <template v-for="item in good_list">
          <el-button type="primary" :key="item.id">{{ item.name }}</el-button>
        </template>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'ElementComponetsQuestionTz',
  data() {
    return {
      weekLists: ['', '星期一', '星期二', '星期三', '星期四', '星期五'],
      morning: [
        { goodsList: ['土豆牛肉', '宫保鸡丁', '宫保鸡丁', '宫保鸡丁', '宫保鸡丁'], title: "星期一" },
        { goodsList: ['土豆牛肉', '宫保鸡丁'], title: "星期二" },
        { goodsList: ['土豆牛肉', '宫保鸡丁'], title: "星期三" },
        { goodsList: ['土豆牛肉', '宫保鸡丁'], title: "星期四" },
        { goodsList: ['土豆牛肉', '宫保鸡丁'], title: "星期五" },
      ],
      afternoon: [
        { goodsList: ['土豆牛肉', '宫保鸡丁', '宫保鸡丁', '宫保鸡丁', '宫保鸡丁'], title: "星期一" },
        { goodsList: ['土豆牛肉', '宫保鸡丁'], title: "星期二" },
        { goodsList: ['土豆牛肉', '宫保鸡丁'], title: "星期三" },
        { goodsList: ['土豆牛肉', '宫保鸡丁', '宫保鸡丁', '宫保鸡丁'], title: "星期四" },
        { goodsList: ['土豆牛肉', '宫保鸡丁'], title: "星期五" },
      ],
      // 右侧
      good_list: [
        {name:"土豆牛肉",id:1},
        {name:"宫保鸡丁",id:2},
        {name:"果子狸",id:3},
        {name:"锅包肉",id:4},
        {name:"清蒸鲈鱼",id:5},
        {name:"狮子头",id:6},
        {name:"佛跳墙",id:7},
      ],


    };
  },

  mounted() {

  },

  methods: {

  },
};
</script>

<style lang="less" scoped>
.cp_box {
  ul {
    padding: 0;
    margin: 0;
    li {
      list-style: none;
      padding: 0;
      margin: 0;
    }
  }
  dl {
    padding: 0;
    margin: 0;
    dd {
      padding: 0;
      margin: 0;
    }
  }
  .left_warp_box {
    .left_dl {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-left: 1px solid #000;
      dt {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 50px;
        border: 1px solid #000;
        border-left: none;
      }
      dd {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 50px;
        border: 1px solid #ccc;
        border-top: none;
      }
    }
    .data_box {
      .row_box {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;

        p {
          margin: 0;
          padding: 0;
          width: calc(100% / 6);
          box-sizing: border-box;

          min-height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #000;
          border-top: none;
          border-right: none;
        }
        ul {
          width: calc(100% - (100% / 6));
          display: flex;
          justify-content: flex-start;
          border-left: 1px solid #000;
          li {
            width: 25%;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            span {
              margin: 4px 2px;
            }
          }
        }
      }
    }
  }
  .right_wrap_box{
    border: 1px solid #000;
    h2{
      margin: 0;
      padding: 0;
      color: #333;
      font-size: 18px;
      text-align: center;
      padding: 10px;
      border-bottom: 1px solid #000;
    }
    .el-button{
      margin: 10px;
    }
  }
}
</style>